<template>
    <div class="home">
        <el-row>
            <!-- 版图 -->
            <el-col :lg="{span:24}" id="home-header">
            </el-col>
            <!-- 文章列表 -->
            <el-col :lg="{span:18,offset:3}" class="article-list"> <!--v-for="(oneArticle,index) in onePageArticleList"-->
                <!-- 一篇文章 -->
                <el-col :lg="{span:24}" class="one-article"> 
                    <!-- 文章图片 -->
                    <el-col :lg="{span:11}" class="article-photo">
                    	<div class="photo" :style="articlePhoto(1)"></div>
                    </el-col>
                    <!-- 文章简介 -->
                    <el-col :lg="{span:13}" class="description">
                        <div class="title">提高代码效率的 20 个JavaScript 技巧和窍门</div>
                        <div class="abstract">减少代码行数并加快开发工作速度的便捷实用技术</div>
                        <div class="read-more">
                    		<el-button type="primary" size="mini" @click="turnToArticleContent(1)">阅读更多</el-button>
                        </div>
                        <div class="article-info">
                    		<div><i class="iconfont icon-yonghu"></i>user</div>
                            <div><i class="iconfont icon-rili"></i>2021-07-06</div>
                            <div><i class="iconfont icon-aixin_shixin"></i>01</div>
                        </div>
                    </el-col>
                </el-col>
				<el-col :lg="{span:24}" class="one-article">
				    <!-- 文章图片 -->
				    <el-col :lg="{span:11}" class="article-photo">
				    	<div class="photo" :style="articlePhoto(2)"></div>
				    </el-col>
				    <!-- 文章简介 -->
				    <el-col :lg="{span:13}" class="description">
				        <div class="title">原生JavaScript实现call、apply和bind</div>
				        <div class="abstract">如果用call进行绑定，其实相当于在egg对象里面增加一个person...</div>
				        <div class="read-more">
				    		<el-button type="primary" size="mini" @click="turnToArticleContent(1)">阅读更多</el-button>
				        </div>
				        <div class="article-info">
				    		<div><i class="iconfont icon-yonghu"></i>user</div>
				            <div><i class="iconfont icon-rili"></i>2021-07-06</div>
				            <div><i class="iconfont icon-aixin_shixin"></i>01</div>
				        </div>
				    </el-col>
				</el-col>
				<el-col :lg="{span:24}" class="one-article">
				    <!-- 文章图片 -->
				    <el-col :lg="{span:11}" class="article-photo">
				    	<div class="photo" :style="articlePhoto(3)"></div>
				    </el-col>
				    <!-- 文章简介 -->
				    <el-col :lg="{span:13}" class="description">
				        <div class="title">我们的小康梦</div>
				        <div class="abstract">为中华民族的伟大复兴而奋斗</div>
				        <div class="read-more">
				    		<el-button type="primary" size="mini" @click="turnToArticleContent(1)">阅读更多</el-button>
				        </div>
				        <div class="article-info">
				    		<div><i class="iconfont icon-yonghu"></i>user</div>
				            <div><i class="iconfont icon-rili"></i>2021-07-06</div>
				            <div><i class="iconfont icon-aixin_shixin"></i>02</div>
				        </div>
				    </el-col>
				</el-col>
            </el-col>
            <el-button type="primary" size="mini" @click="changeWallpaper" class = "change-wallpaper">一键换肤</el-button>
        </el-row>
        <div class="page-num">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :total="articleList.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "home",
        data(){
            return{
                articleList:[],
                onePageArticleList:[],
                currentPage:1
            }
        },
        created(){
            if(window.localStorage.getItem('token')==''||window.localStorage.getItem('token')==undefined)
                this.$router.replace('/');
            /* document.querySelector('.mtabbar').setAttribute('style','display:block'); */
            document.querySelector('.gfooter').setAttribute('style','display:block');
            this.requestForMessage();
        },
		mounted(){
			document.querySelector('.mtabbar').setAttribute('style','display:block');
		},
        methods:{
            requestForMessage(){
                this.request({
                    url:'/home/findall'
                }).then(res=>{
                    for(let i=0;i<res.data.length;i++){
                        //console.log(res.data[i]);
                        res.data[i]['time'] = res.data[i]['time'].substr(0,19);
                        res.data[i]['content'] = this.fileterMark(res.data[i]['content']);
                        res.data[i]['content'] = this.limitLength(res.data[i]['content'],120);
                        this.articleList.push(res.data[i]);
                    }
                    this.handleCurrentChange(this.currentPage);
                }).catch(err=>{
                    console.log(err);
                })
            },
            handleCurrentChange(val){//val为当前页码
                this.currentPage = val;
                let len = this.onePageArticleList.length;
                for(let i=0;i<len;i++){//清空单页内容
                    this.onePageArticleList.splice(0,1);
                }
                for(let i=(val-1)*10;i<val*10 && i<this.articleList.length;i++){
                    this.onePageArticleList.push(this.articleList[i]);
                }
                document.body.scrollTop = document.documentElement.scrollTop = 0;
            },
            articlePhoto(val){
                return {
                    backgroundImage:'url(' + require('@/assets/image/home/random/'+val+'.jpg') + ')'
                };
            },
            turnToArticleContent(articleID){
                this.$router.push({
                    path:'/arcontent',
                    query:{
                        articleID:articleID
                    }}).catch(error=>error);
            },
            limitLength(content,limit){
                if(content.length <= limit){
                    return content;
                }
                return content.substr(0,limit+1)+'...';
            },
            fileterMark(content){
                return content.replace(/\*/g,'').replace(/```/g,' ').replace(/#/g,'');
            },
            changeWallpaper(){
                let num = /[0-9]+/.exec(document.getElementById("home-header").style.backgroundImage);
                let flag = num;
                while(flag == num){
                    flag = Math.floor(Math.random() * 27) + 1;  //共有27张图片
                }
                switch (flag) {
                    case 1:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_1.jpg') + ')';
                        break;
                    case 2:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_2.jpg') + ')';
                        break;
                    case 3:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_3.jpg') + ')';
                        break;
                    case 4:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_4.jpg') + ')';
                        break;
                    case 5:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_5.jpg') + ')';
                        break;
                    case 6:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_6.jpg') + ')';
                        break;
                    case 7:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_7.jpg') + ')';
                        break;
                    case 8:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_8.jpg') + ')';
                        break;
                    case 9:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_9.jpg') + ')';
                        break;
                    case 10:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_10.jpg') + ')';
                        break;
                    case 11:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_11.jpg') + ')';
                        break;
                    case 12:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_12.jpg') + ')';
                        break;
                    case 13:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_13.jpg') + ')';
                        break;
                    case 14:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_14.jpg') + ')';
                        break;
                    case 15:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_15.jpg') + ')';
                        break;
                    case 16:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_16.jpg') + ')';
                        break;
                    case 17:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_17.jpg') + ')';
                        break;
                    case 18:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_18.jpg') + ')';
                        break;
                    case 19:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_19.jpg') + ')';
                        break;
                    case 20:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_20.jpg') + ')';
                        break;
                    case 21:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_21.jpg') + ')';
                        break;
                    case 22:
                        document.getElementById("home-header").style.backgroundImage = 'url(' + require('../../assets/image/home/hacg_fun_22.jpg') + ')';
                        break;
                }

            }
        }
    }
</script>

<style scoped>
.home{

}
.change-wallpaper{
    float: right;
}
#home-header{
    height: 400px;
    margin-top: -54px;
    background: url("../../assets/image/home/hacg_fun_1.jpg") center no-repeat;
    background-size: cover;
    position: relative;
    z-index: -20;
}
.article-photo{
    padding: 20px;
}
.photo{
    width: 380px;
    height: 250px;
    background: url("../../assets/image/home/random/1.jpg") no-repeat center;
    background-size: cover;
    border-radius: 6px;
}
.article-info{
    display: flex;
    margin-top: 10px;
}
.article-info div{
    font-size: 12px;
    color: #525F7F;
    padding-right: 10px;
    border-right: 1px solid;
    margin-right: 10px;
    font-family: "Play","Microsoft Yahei","Open Sans", sans-serif;
}
.article-info div:last-child{
    border: none;
}
.read-more{
    margin-top: 10px;
}
.abstract{
    font-size: 14px;
    color: #8898aa;
    line-height: 26px;
    margin-top: 10px;
    min-height: 52px;
}
.title{
    font-size: 18px;
    color: #32325d;
    margin-top: 40px;
}
.description{
    padding-right: 20px;
}
.one-article{
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
    background: #fff;
    margin-bottom: 60px;
}
.article-list{
    margin-top: 50px;
}
.page-num{
    width: 80%;
    margin-left: 10%;
    text-align: center;
    margin-bottom: 50px;
}
.article-info .iconfont{
    font-size: 12px;
    margin-right: 5px;
}
@media screen and (max-width: 450px) {
	#home-header{
	    height: 260px;
	}
	.photo{
	    width: 292px;
	    height: 200px;
	    background: url("../../assets/image/home/random/1.jpg") no-repeat center;
	    background-size: cover;
	    border-radius: 6px;
	}
	.article-info{
	    display: flex;
	    margin-top: 10px;
		padding: 0px 15px 15px 15px;
	}
	.read-more{
		padding: 0px 15px 0px 15px;
	}
	.abstract{
	    font-size: 14px;
	    color: #8898aa;
	    line-height: 26px;
	    margin-top: 10px;
	    min-height: 20px;
		padding: 0px 15px 0px 15px;
	}
	.title{
	    font-size: 18px;
	    color: #32325d;
		padding: 0px 15px 0px 15px;
		margin-top:0;
	}
	.description{
		padding: 0px 15px 0px 15px;
	}
	.article-list{
	    margin-top: 10px;
		padding: 15px;
	}
	.change-wallpaper{
		display: none;
	}
}
</style>